<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pocketbase Demo</title>
    <script src="./tailwindcss-jit-cdn.umd.min.js"></script>
  </head>
  <body>
    <div id="app" v-cloak @vue:mounted="mounted" class="flex p-10">
      <div class="container w-96 flex flex-col mx-auto gap-4">

        <template v-if="!isLogin">
          <div class="flex flex-col">
            <h6>User</h6>
            <input type="text" ref="acc" value="cat@test.com">
          </div>
          <div class="flex flex-col">
            <h6>Password</h6>
            <input type="password" ref="pwd" value="12345678">
          </div>
          <button class="bg-green-500 text-white p-3 rounded" @click="login">登录</button>
          <button class="bg-indigo-500 text-white p-3 rounded" @click="register">注册</button>
        </template>
        
        <template v-else>
          <!-- 用户区 -->
          <div class="flex items-center gap-4">
            <img :src="getSingleFile(user, 'avatar')" class="w-12 rounded">
            <span>{{user.name}}, 你已登录</span>
            <span class="text-red-500 cursor-pointer hover:underline" @click="logout">[登出]</span>
          </div>

          <!-- 编辑区 -->
          <form ref="postForm" @submit.prevent="addPost" class="flex flex-col gap-2">
            <input name="title" type="text" v-model="postTitle" class="w-full h-10 border-gray-300 text-sm" placeholder="请填写标题...">
            <div class="flex flex-col w-full h-48">
              <div ref="quill" v-effect="console.log(user)"></div>
            </div>
            <div class="flex">
              <input ref="fileInput" class="hidden w-3/4" type="file" accept="image/*" multiple @change="handleFileUpload">
              <button @submit.prevent="addPost" :disabled="isUploading" class="flex-1 bg-indigo-500 text-white px-3 h-10">
                {{ isUploading ? "图片上传中..." : "发表" }}
              </button>
            </div>
            <p class="font-mono text-xs text-gray-500">{{postContent}}</p>
          </form>

          <!-- 列表区 -->
          <div class="flex flex-col">
            <template v-for="(post, index) in posts" :key="post.id">
              <div class="article group flex flex-col gap-2 py-4 border-b duration-200 hover:bg-gray-50 hover:px-4">
                <h2 class="font-bold text-indigo-600">{{post.title}}</h2>
                <p class="text-sm text-gray-600" v-html="post.content"></p>
                <!-- <img v-if="post.image" :src="getFileUrl(post, 'image')" class="w-10 h-10 rounded"> -->
                <div class="flex gap-2">
                  <template v-for="url in getMultipleFiles(post, 'files')" :key="url">
                    <img :src="url" class="h-24 rounded duration-200 hover:scale-110">
                  </template>
                </div>
                <div class="flex gap-2 text-xs">
                  <span class="opacity-50">#{{(currentPage - 1) * perPage + index + 1}}, {{post.expand.author.name}}, {{formatDate(post.datetime)}}</span>
                  <span class="hidden cursor-pointer text-green-500 group-hover:inline hover:underline" @click="console.log(post)">详情</span>
                  <span class="hidden cursor-pointer text-indigo-500 group-hover:inline hover:underline" @click="editPost(post)">编辑</span>
                  <span class="hidden cursor-pointer text-red-500 group-hover:inline hover:underline" @click="delPost(post)">删除</span>
                </div>
              </div>
            </template>
          </div>

          <!-- 分页区 -->
          <div class="flex gap-1 py-2 justify-center">
            <button 
              class="w-8 h-8 text-gray-400 hover:text-indigo-500 disabled:opacity-50" 
              @click="prevPage" 
              :disabled="currentPage === 1"
            >
              «
            </button>
            
            <template v-for="pageNum in totalPages" :key="pageNum">
              <button 
                class="w-8 h-8" 
                :class="{'bg-indigo-500 text-white': currentPage === pageNum, 'hover:bg-gray-50': currentPage !== pageNum}" 
                @click="setPage(pageNum)"
              >
                {{ pageNum }}
              </button>
            </template>
          
            <button 
              class="w-8 h-8 text-gray-400 hover:text-indigo-500 disabled:opacity-50" 
              @click="nextPage" 
              :disabled="currentPage === totalPages"
            >
              »
            </button>
          </div>
        </template>

      </div>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
